<template>
  <div class="specification-container">

    <div v-for="(item,index) in specificationContainer" :key="index">
      <div class="titleHeader">{{item.specificationName}}</div>
      <div class="specificationContainer">
        <div class="specificationContainer-item boederSet"  v-for="(specification,idx) in item.specificationParameterLv2" :key="idx">
          <div v-if="specification.productSpecificationParameterValue">
            <div class="titleHeader" >{{specification.specificationName}}</div>
            <div class="specificationBody">
              <div class="specification-item" v-for="(i,n) in specification.productSpecificationParameterValue" :key="n">
                <div class="specification-name">
                  {{i.specificationName}}:
                </div>
                <div class="specification-value">
                  <!--{{specification.value}}-->
                  <span  style="margin-right: 10px">{{i.specificationValue}}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <!--<div class="titleHeader" ></div>-->
            <div class="specificationBody">
              <div class="specification-item" >
                <div class="specification-name">
                  {{specification.specificationName}}:
                </div>
                <div class="specification-value">
                  <span  style="margin-right: 10px">{{specification.lv2Value}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--  此注释勿删/exterior/capability/usingSet -->
      </div>
    </div>
  </div>
</template>

<script>
  import * as opreator from 'api/getData'

  export default {
      name: "specification-compent",
      props:['param'],
      data() {
          return {
            specificationContainer:[]
          }
      },
      mounted() {
        this.getData()
      },
      methods: {
        getData(){
          opreator.productParam(this.param).then(res => {
            this.specificationContainer = res.data
          })
        }
      }
  }
</script>

<style scoped>
  .specification-container{
    display: flex;
    flex-direction: column;
  }
  .titleHeader{
    font-weight: bold;
  }
  .specificationContainer{
    padding: 20px 12px 8px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .specificationContainer-item{
    margin-bottom: 12px;
    width: 32%;
    display: flex;
    flex-direction: column;
  }
  .specificationBody{
    display: flex;
    flex-direction: column;
  }
  .specification-item{
    display: flex;
    min-height: 40px;
    align-items: center;
    border-bottom: 1px solid #E0E8EF;
    padding: 0 10px;
  }
  .specification-name{
    margin-right: 4px;
  }
</style>
